<!-- <route lang="jsonc" type="home">{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "投资理财"
  }
}</route> -->

<script lang="ts" setup>
import { ref } from 'vue'
import { productList } from '@/api/user'

const userTel = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).userInfo.telephone : ''
const isCs = !userTel || userTel == '18373481952'

function actived() {
  console.log('2222222222222222222222222222222')

  getProductList()
  console.log('借款人首页加载-----------------------------')
}

const productLists = ref([])

// 新增：跳转到详情页
function goToDetail(product: any) {
  const productData = encodeURIComponent(JSON.stringify(product))
  uni.navigateTo({
    url: `/pages-sub/financial/investorDetail?productData=${productData}`,
  })
}

async function getProductList() {
  const res = await productList({
    page: 1,
    size: 9999,
    product_name: '',
    status: 1,
  })
  console.log(res.data.list)
  productLists.value = res.data.list
}
// 暴露方法给父组件
defineExpose({
  actived,
})
</script>

<template>
  <view class="container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="header-content">
        <view class="title">
          无忧易配
        </view>
        <view class="subtitle">
          让挣钱更简单
        </view>
      </view>
    </view>

    <!-- 产品列表 -->
    <view class="product-list">
      <!-- 产品卡片列表 -->
      <view v-for="(product, index) in productLists" :key="index" class="product-card">
        <view class="card-content">
          <view class="product-title">
            {{ product.name }}
          </view>
          <template v-if="!isCs">
            <view class="amount-info">
              <text class="amount-label">
                最高可申请配资
              </text>
              <text class="amount-value">{{ product.quota }}</text>
            </view>
            <view class="description">
              {{ product.description }}
            </view>
            <view class="loan-type-tags">
              <view v-if="[0, 1].includes(product.limit)" class="loan-tag enterprise-tag">
                企业
              </view>
              <view v-if="[0, 2].includes(product.limit)" class="loan-tag personal-tag">
                个人
              </view>
              <view :class="['loan-tag', product.term == 1 ? 'short-term-tag' : 'long-term-tag']">
                {{ product.term == 1 ? '短期' : '长期' }}
              </view>
            </view>
          </template>
          <view v-else class="description">
            {{ product.description }}
          </view>
        </view>
        <view class="apply-btn" @click.stop="goToDetail(product)">
          详情
        </view>
      </view>

      <!-- 暂无数据空状态 -->
      <view v-if="productLists.length === 0" class="empty-state">
        <wd-status-tip image="content" tip="暂无数据" />
      </view>
    </view>
  </view>
</template>

<!-- <style scoped>
page {
  background: linear-gradient(180deg, #FFA726 0%, #FF9800 100%);
}
</style> -->
<style lang="scss" scoped>
.container {
  // min-height: 100vh;
  background: linear-gradient(180deg, #ff9800 0%, #f6f6f6 40%);
  padding-bottom: 40rpx;
}

.header {
  padding: 80rpx 40rpx 60rpx;

  .header-content {
    text-align: left;

    .title {
      font-size: 48rpx;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 16rpx;
    }

    .subtitle {
      font-size: 28rpx;
      color: #ffffff;
      opacity: 0.9;
    }
  }
}

.product-list {
  padding: 0 40rpx;
}

.product-card {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;

  .card-content {
    flex: 1;

    .product-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 24rpx;
    }

    .amount-info {
      margin-bottom: 16rpx;

      .amount-label {
        font-size: 24rpx;
        color: #666666;
        display: block;
        margin-bottom: 8rpx;
      }

      .amount-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff9800;
      }
    }

    .description {
      font-size: 24rpx;
      color: #999999;
    }
  }

  .apply-btn {
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
    color: #ffffff;
    padding: 20rpx 32rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    min-width: 140rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);

    &:active {
      opacity: 0.8;
      transform: scale(0.98);
    }
  }
}

// 添加空状态样式
.empty-state {
  margin-top: 100rpx;

  :deep(.wd-status-tip) {
    .wd-status-tip__text {
      color: #ffffff !important;
    }

    .wd-status-tip__tip {
      color: #ffffff !important;
    }
  }
}

.loan-type-tags {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
  flex-wrap: wrap;
}

.loan-tag {
  padding: 10rpx 24rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  font-weight: bold;
  display: inline-block;
}

.enterprise-tag {
  background: #ffefee;
  color: #fa5151;
}

.personal-tag {
  background: #e8f4fd;
  color: #1890ff;
}

.short-term-tag {
  background: #fff7e6;
  color: #fa8c16;
}

.long-term-tag {
  background: #f6ffed;
  color: #52c41a;
}
</style>
